{extend name="layout/layout" /}
﻿
{block name="title"}Login - {$app.title}{/block}
{block name="main"}
<style>
    .card {
        width: 500px;
    }

    @media screen and (max-width: 760px) {
        .card {
            width: 95vw;
        }
    }
</style>
<div class="container mx-auto">
    <div class="card shadow-lg fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <div class="card-body">
            <div class="text-lg font-bold">登录认证</div>
            <div class="flex gap-2 justify-center mt-4">
                {foreach :get_enabled_oauth_mode() as $v}
                <button onclick="login('{$v}')" class="btn btn-primary flex-1">
                    {if $v ==='github'}
                    <svg class="h-6 w-6 mr-3 fill-current" viewBox="0 0 1024 1024"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
                        ></path>
                    </svg>
                    {/if}
                    {if $v==='gitee'}
                    <svg class="h-6 w-6 text-red mr-3 fill-current" viewBox="0 0 1024 1024"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"
                        ></path>
                    </svg>
                    {/if}
                    {$v}
                </button>
                {/foreach}
            </div>
        </div>
    </div>
</div>
<script>

    function login(action = 'github') {
        const opt = {
            width: 700,
            height: 700,
            left: (window.screen.availWidth - 30 - 500) / 2,
            top: (window.screen.availHeight - 30 - 500) / 2,
        }
        window.open(`/auth/oauth/${action}`, 'Login', `height=${opt.height}, width=${opt.width}, top=${opt.top}, left=${opt.left}, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)

        // # 通过监听，父页面可以拿到子页面传递的token，父(前端页面)，子(小窗)
        window.addEventListener('message', function (e) {
            const data = e.data.data
            if (e.data.status !== 'ok') {
                $message.error(e.data.message)
                return;
            }
            if (data?.access_token?.length > 0) {
                localStorage.setItem("ACCESS-TOKEN", JSON.stringify({
                    value: data.access_token,
                    expire: data.expire * 1000,
                }))
                window.location.href = '/'
            }
            $message.error('登录失败，请联系管理员')
        }, false)
    }
</script>
{/block}